<template>
    <view>
      <view class="container">
      <div style="width: 95%; margin-left: 2.5%">
        <div :style="role=='处理厂司机'?'display: flex;align-items: center;justify-content: space-between':''">
          <div style="color: #1a512c">
            <div v-show="role!='养殖场账号'" style="font-size: 25px; font-weight: 700">您好! {{ nickName }}</div>
            <div v-if="role=='养殖场账号'" style="display: flex;align-items: center;justify-content: space-between;font-size: 25px; font-weight: 700">
                <div @click="webs">您好!</div>
                <div>{{ nickName }}</div>
            </div>
            <div style="height: 15rpx"></div>
            <div>您加入该系统{{alDay}}天</div>
            <div style="height: 5rpx"></div>
            <div v-if="role=='司机'">已累计接受工单{{worknums}}次</div>
            <div v-if="role=='养殖场账号'">
              <text>已累计处理</text>
              <text>{{ totalOrganicWeightVOList[0]?.organicWeight }}吨</text>
              <text>{{ totalOrganicWeightVOList[0]?.organicType }}</text>
              <text>和</text>
              <text>{{ totalOrganicWeightVOList[1]?.organicWeight }}吨</text>
              <text>{{ totalOrganicWeightVOList[1]?.organicType }}</text>
            </div>
          </div>
          <div class="carStop" @click="carStop" v-if="role=='处理厂司机'">
            <!-- <image :src="base+'/profile/farm_photo/2024/06/14/p_20240614152526A019.jpg'" mode="scaleToFill" /> -->
            <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fp.jpg" mode="scaleToFill" />
            
            <div>车辆报停</div>
          </div>
        </div>
        <div style="height: 10px"></div>
        <!-- 边框 -->
<view class="card" v-if="role!='实验员'&&role!='任务发布实验员'&&role!='任务分配实验员'" style="display: flex; overflow-x: auto; white-space: nowrap;padding-top: 20px;padding-bottom: 20px;">
  <div style="height: 20px;"></div>
  <div v-for="item in allType" :key="item.id" style="width: 48%; display: inline-block; margin: 0 10px;">
    <div style="text-align: center;color: #1a512c;">
      <div>
        <span style="font-size: 50px; font-weight: 900;">{{ item.value||0 }}</span>
        <span style="font-weight: 500;">t</span>
      </div>
      <div>今日已收集{{ item.name }}</div>
    </div>
  </div>
  <div v-if="allType.length==0" style="width: 48%; display: inline-block; margin: 0 10px;">
    <div style="text-align: center;color: #1a512c;">
      <div>
        <span style="font-size: 50px; font-weight: 900;">0</span>
        <span style="font-weight: 500;">t</span>
      </div>
      <div>今日已收集有机质</div>
    </div>
  </div>
  <!-- <div style="text-align: center;width: 100%;" v-if="allType.length==0">暂无有机质</div> -->
  <div style="height: 20px;"></div>
</view>
<!-- 实验助手 v-if="role=='实验助手'" -->
 <div v-if="role=='实验员'||role=='任务发布实验员'||role=='任务分配实验员'" style="color: #18512c;font-weight: 700;font-size: 17px;">总累计</div>
<view v-if="role=='实验员'||role=='任务发布实验员'||role=='任务分配实验员'" class="cards" style="display: flex; overflow-x: auto; white-space: nowrap;padding-top: 20px;padding-bottom: 20px;">
  <div style="height: 20px;"></div>
  <div v-for="item in expert" :key="item.id" style="width: 48%; display: inline-block; margin: 0 10px;">
    <div style="text-align: center;color: #1a512c;">
      <div>
        <span style="font-size: 50px; font-weight: 900;">{{ item.value }}</span>
        <span style="font-weight: 500;">t</span>
      </div>
      <div>{{ item.title }}</div>
    </div>
  </div>
  <div style="text-align: center;width: 100%;" v-if="expert.length==0">暂无</div>
  <div style="height: 20px;"></div>
</view>
        <!--  -->
        <div style="height: 10px"></div>
        <div v-if="role=='养殖场账号'">
          <div style="color: #1a512c;">预计将回收<text>{{yj.weight1}} t {{yj.text1}}</text>，{{yj.weight2}} m³ {{ yj.text2 }}</div>
          <div style="height: 10px"></div>
        </div>
        <div v-if="role=='调度员'">
          <div style="color: #1a512c;">预计待收集{{predictDung}}t牛粪，{{predictSewage}}³污水</div>
          <div style="height: 10px"></div>
        </div>
        <!-- 收运车到达 -->
        <div class="center-bg">
          <div style="height: 15px"></div>
          <div style="width: 90%; margin-left: 5%">
            <div>
              <div v-if="role=='处理厂司机'&&kmValue==''">当前收运车到达处理厂，正在卸料。</div>
              <div v-if="role=='养殖场账号'">当前收运车到达处理厂，正在卸料。</div>
              <div v-if="role=='处理厂司机'&&kmValue!=''">距离处理厂{{ kmValue }}{{ kmUnit }}</div>
              <div v-if="role=='调度员'">当前收运中{{running}}辆，空闲{{leisure}}辆</div>
              <div v-if="role=='实验员'||role=='任务发布实验员'||role=='任务分配实验员'">{{lastFeedbackTime?lastFeedbackTime:'暂时没'}}有反馈的任务单</div>
            </div>
          </div>
          <div style="height: 15px"></div>
        </div>
        <div style="height: 10px"></div>
        <div style="background: #fff; border-radius: 10px">
          <div style="height: 10px"></div>
          <!-- eCharts -->
          <view class="charts-box">
            <div style="width: 95%;display: flex;justify-content: space-between;" v-if="role=='处理厂司机'">
              <div></div>
              <div style="display: flex;">
                <div v-for="(item,index) in week" style="margin: 0 10rpx 0 0;" @click="toggleIndex(item,index)">
                  <div class="roundDate" :class="index == indexs?'active':''">{{ item }}</div>
                </div>
              </div>
            </div>
            <div style="width: 95%;display: flex;align-items: center;justify-content: space-between;" v-if="role=='养殖场账号'||role=='调度员'">
				<div style="width: 10px"></div>
              <div style="display: flex;">
                <div v-for="(item,index) in week" style="margin: 0 10rpx 0 0;" @click="toggleIndexs(item,index)">
                  <div class="roundDate" :class="index == indexss?'active':''">{{ item }}</div>
                </div>
              </div>
              <div>
                <div class="border-max">
                <div style="height: 5rpx"></div>
                <picker @change="bindPickerChange" :value="index" :range="array">
                  <input style="margin-left: -10px;" placeholder="请选择有机质类型" disabled v-model="farmChart.type" type="text" />
                </picker>
                <div style="height: 5rpx"></div>
              </div>
              </div>
            </div>
            <qiun-data-charts :canvas2d="true"
            canvasId="cSzLoQHbVGhyVGQoVMEiaJwNPHqLAyma" type="column" :opts="opts" :chartData="chartData" />
          </view>
          <div style="height: 10px"></div>
        </div>
        <!-- 底部 -->
        <div style="height: 10px"></div>
        <div class="foot-card">
          <div style="height: 15px"></div>
          <div 
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 95%;
              margin-left: 2.5%;
            "
            v-if="role=='处理厂司机'"
          >
            <div>
              <div style="color: #1a512c; font-weight: 500">
                <div>您当前有 {{receiveOrder}} 条手动派发工单待接</div>
              </div>
              <div style="color: #c5b46d; font-size: 14px; font-weight: 500">
                今日累接单{{dayNum}}次
              </div>
            </div>
            <div class="look" v-if="role=='处理厂司机'" @click="looks">查看</div>
          </div>
          <div style="display: flex;align-items: center;justify-content: space-between;width: 95%;margin-left: 2.5%;"
            v-if="role =='养殖场账号'"
          >
            <div>
              <div style="color: #1a512c; font-weight: 500">
                <div>您当前有{{money.a}}元费用待交</div>
              </div>
              <div style="color: #c5b46d; font-size: 14px; font-weight: 500">
                您已累计缴费用{{money.b}}元
              </div>
            </div>
            <div class="look" @click="fee">缴费</div>
          </div>
          <div style="display: flex;align-items: center;justify-content: space-between;width: 95%;margin-left: 2.5%;"
             v-if="role=='实验员'||role=='任务发布实验员'||role=='任务分配实验员'"
          >
            <div>
              <div style="color: #1a512c; font-weight: 500">
                <div>您当前有 {{test.unstarted}}个任务待开始</div>
              </div>
              <div style="color: #c5b46d; font-size: 14px; font-weight: 500">
                今日累计完成实验任务{{test.completed}}单
              </div>
            </div>
            <div class="look" @click="fee">查看</div>
          </div>
          <!-- 调度员 -->
          <div style="display: flex;align-items: center;justify-content: space-between;width: 95%;margin-left: 2.5%;" v-if="role =='调度员'">
            <div>
              <div style="color: #1a512c; font-weight: 500">
                <div>当前有{{pending}}个任务待接单</div>
              </div>
              <div style="color: #c5b46d; font-size: 14px; font-weight: 500">
                累计已完成收运{{aleardy}}单
              </div>
            </div>
            <div class="look" @click="manage">管理</div>
          </div>
           <div style="height: 15px"></div>
        </div>
        <div style="height: 10px;"></div>
        <div class="foot-card" v-if="role=='处理厂司机'">
          <div style="height: 15px"></div>
          <div 
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 95%;
              margin-left: 2.5%;
            "
            v-if="role=='处理厂司机'"
          >
            <div>
              <div style="color: #1a512c; font-weight: 500">
                <div>已到达收运点，请填报节点流程!</div>
              </div>
              <div style="color: #c5b46d; font-size: 14px; font-weight: 500">
                到达收运点后，请对收运点信息进行填报
              </div>
            </div>
            <div class="looks" @click="submit">填报</div>
          </div>
           <div style="height: 15px"></div>
        </div>
    <div style="height: 5vh;"></div>
    </div>
    </view>
    <!-- 遮罩层 -->
    <u-overlay :show="showModal" @click="showModal = false">
		<view class="warp">
			<view class="rect" @tap.stop>
        <div style="height: 4vh;"></div>
        <div class="km" v-if="kmValue==''">刷新查看距离</div>
        <div class="km" v-if="kmValue!=''">当前距离收运点：{{ kmValue }}{{ kmUnit }}</div>
        <div style="height: 4vh;"></div>
        <div style="display: flex;justify-content:center;">
          <div class="refresh" @click="refresh">刷新</div>
        </div>
        <div style="height: 4vh;"></div>
        <div class="tip">*离收运点距离小于1000M时可以上报</div>
        <div style="height: 4vh;"></div>
      </view>
		</view>
	</u-overlay>
     <!--  -->
    <!-- <tabBar :currentPage="currentPage" :role="role"></tabBar> -->
     <div style="height: 7vh;"></div>
    <!-- <tabBar :currentPage="currentPage" :role="role" :indent="indent"></tabBar> -->
    </view>
  </template>
  <script>
  // import tabBar from '../../compontents/tabBar/index.vue';
  import { driverCount,getNearFarm,experCategory,experCurrent,experTotal,lastTime,farmBord,organicType,farmEcharts,days,collect,estimated,stats,task,workNum,ordNum,farmIndex,farmMonery } from '../../common/example.js';
  export default {
  // components: {
  //   tabBar
  // },
    data() {
      return {
        showModal:false,
        indent:'',
        expert:[
          {
            title:'已完成任务数',value:0
          },
          {
            title:'未完成任务数',value:0
          }
        ],
lastFeedbackTime:'',//最新反馈时间
        test:{
          unstarted:0,
          completed:0
        },
        allType:[],
        base:'',
        array: [],
        index: 0,
        farmChart:{
          type:'',
          date:''
        },
        yj:{
          text1:'',
          weight1:0,
          text2:'',
          weight2:0
        },
        money:{
          a:0,
          b:0,
        },
        predicOrganicWeightVOList:[],//养殖场预计
        todayOrganicWeightVOList:[],//养殖场今日
        totalOrganicWeightVOList:[],//养殖场累计
        indexs:0,
        state:false,
        receiveOrder:0,//待接
        indexss:0,//养殖场图表日期切换
        week:['周','月','年'],
        alDay:'',//已加入天数
        nickName:'',//昵称
        driverdung:0,//司机收集牛粪
        driversewage:0,//司机收集污水
        dung:0,//牛粪
        sewage:0,//污水
        predictDung:0,//预计收集牛粪
        predictSewage:0,//预计收集污水
        leisure:0,//空闲
        running:0,//收运中
        pending:0,//待接单
        aleardy:0,//已完成
        worknums:0,//接受工单次数
        dayNum:0,//今日已接
        dNum:0,//待接单
        userInfo:{},
        flag:true,
        role:'',//处理厂司机/养殖场账号
        chartData: {},
        currentPage:'',
        opts: {
          color: [
            "#1890FF",
            "#91CB74",
            "#FAC858",
            "#EE6666",
            "#73C0DE",
            "#3CA272",
            "#FC8452",
            "#9A60B4",
            "#ea7ccc",
          ],
          padding: [15, 15, 0, 5],
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true,
          },
          yAxis: {
            data: [
              {
                min: 0,
              },
            ],
          },
          extra: {
            column: {
              type: "group",
              width: 30,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08,
            },
          },
        },
        lat:'',
        lon:'',
        kmValue:'',
        kmUnit:'',
        fillOrd:{}
      };
    },
    methods: {
      bindPickerChange: function(e) {
        let t = this;
            console.log('picker发送选择改变，携带值为', e.detail.value)
            t.index = e.detail.value;
            console.log(t.array[e.detail.value],'t.range[t.index]');
            t.farmChart.type = t.array[t.index];
            t.chartsFarm(this.farmChart.date);
            
        },
      webs(){
        let url = 'https://pro.surveyking.cn/s/wkT0OO'
				uni.navigateTo({
					url:'/pagesDispatch/index/webview?url='+url
				})
      },
        // 缴费
        fee(){
            uni.navigateTo({ url: '/pagesFarmer/index/fees' })
        },
        // 查看工单
      looks(){
        if(this.receiveOrder==0){
          uni.showToast({
            title: '当前暂无工单',
            icon: 'none',
            mask: true
          })
        }else{
          uni.navigateTo({ url: '/pagesDriver/system/workOrder' })
        }
        
      },
    //   提交
      submit(){
        let t = this;
        console.log(t.kmUnit,t.kmValue);
        if(t.kmValue<1000&&t.kmUnit=='m'){
        uni.navigateTo({ url: '/pagesDriver/system/filling' })
        uni.setStorageSync('fillWork', this.fillOrd)
        }else{
          t.showModal = true;
        }
        return;
      },
      // refresh(){
      //   uni.getLocation({
      //     type: 'gcj02', //返回可以用于uni.openLocation的经纬度
      //     success: function (res) {
      //      console.log(res,'res');
      //     //  this.lat = res.latitude;
      //     //  this.lon = res.longitude;
      //      getNearFarm({
      //       lat:res.latitude,
      //       lon:res,longitude
      //      }).then(response=>{
      //       console.log(response.data,'response');
      //      })
      //     }
      //   });
      // },
      refresh() {
  // 定义一个异步函数，用于获取位置并调用getNearFarm
  const getLocationAsync = () => {
    return new Promise((resolve, reject) => {
      uni.getLocation({
        type: 'gcj02',
        success: function (res) {
          resolve(res); // 将位置信息传递给resolve
        },
        fail: function (err) {
          reject(err); // 处理获取位置失败的情况
        }
      });
    });
  };

  // 使用async/await来确保在获取位置后再执行getNearFarm
  (async () => {
    try {
      const location = await getLocationAsync(); // 等待获取位置信息
      console.log(location, 'location'); // 输出位置信息到控制台

      // 调用getNearFarm并传递位置信息
      const response = await getNearFarm({
        lat: location.latitude,
        lon: location.longitude
      });

      console.log(response.data, 'response'); // 输出getNearFarm的响应数据到控制台
      if(response.data.code==200){
        this.kmValue = response.data.data.distance;
        this.kmUnit = response.data.data.unit;
        this.fillOrd = response.data.data.workOrderDetail;
        this.fillOrd.farmName = response.data.data.farmName;
        this.fillOrd.licenseNumber = response.data.data.licenseNumber;
        uni.showToast({
          title:'已重新定位',
          icon:'none'
        })
        if(this.kmValue<1000&&this.kmUnit=='m'){
          this.showModal = false;
        }
        console.log(this.kmValue);
      }else{
        uni.showToast({
          title:response.data.msg,
          icon:'none'
        })
      }
    } catch (error) {
      console.error('Error:', error); // 处理可能的错误
    }
  })();
},

      // 管理
      manage(){
        uni.navigateTo({url:'/pagesDispatch/index/quest'})
      },
      carStop(){
        uni.navigateTo({ url: '/pagesDriver/system/carStop' })
      },
      toggleIndex(i,index){
        this.indexs = index;
        this.chartsWeek(i);
      },
      // 养殖场日期切换
      toggleIndexs(i,index){
        this.indexss = index;
        this.chartsFarm(i);
      },
      chartsFarm(i){
        console.log(i,'iiiiiii');
        
        if(i=='周'){
          this.farmChart.date = 7;
        }else if(i=='月'){
          this.farmChart.date = 30;
        }else if(i=='年'){
          this.farmChart.date = 365;
        }
      // 养殖场图表
      if(!i){
        farmEcharts({
          organicType:this.farmChart.type,
          timeSort:7,
        }).then(response=>{
          console.log(response.data,'养殖场图表');
          const week = response.data.data.map((item)=>item.timeNumber)
          const value = response.data.data.map((item)=>item.totalValue);
          let res = {
            categories:week,
            series:[
              {
                name:'收运量',
                data:value
              }
            ]
          }
          this.chartData = JSON.parse(JSON.stringify(res));
        })
      }else if(i=='月'){
        farmEcharts({
          organicType:this.farmChart.type,
          timeSort:this.farmChart.date,
        }).then(response=>{
          console.log(response.data,'养殖场图表');
          const week = response.data.data.map((item)=>item.timeNumber)
          const value = response.data.data.map((item)=>item.totalValue);
          let res = {
            categories:week,
            series:[
              {
                name:'收运量',
                data:value
              }
            ]
          }
          this.chartData = JSON.parse(JSON.stringify(res));
        })
      }else if(i=='年'){
        farmEcharts({
          organicType:this.farmChart.type,
          timeSort:this.farmChart.date,
        }).then(response=>{
          console.log(response.data,'养殖场图表');
          const week = response.data.data.map((item)=>item.timeNumber)
          const value = response.data.data.map((item)=>item.totalValue);
          let res = {
            categories:week,
            series:[
              {
                name:'收运量',
                data:value
              }
            ]
          }
          this.chartData = JSON.parse(JSON.stringify(res));
        })
      }else{
        farmEcharts({
          organicType:this.farmChart.type,
          timeSort:7,
        }).then(response=>{
          console.log(response.data,'养殖场图表');
          const week = response.data.data.map((item)=>item.timeNumber)
          const value = response.data.data.map((item)=>item.totalValue);
          let res = {
            categories:week,
            series:[
              {
                name:'收运量',
                data:value
              }
            ]
          }
          this.chartData = JSON.parse(JSON.stringify(res));
        })
      }
        
      }
    },
    onShow() {
      driverCount().then(res=>{
        console.log(res,'res----------------');
      })
      uni.hideHomeButton();
      this.indent = uni.getStorageSync('pageIndent');
      this.role = uni.getStorageSync('userInfo').remark;
      this.nickName = uni.getStorageSync('userInfo').nickName;
      farmBord({
        userType:this.role=='养殖场账号'?'farmer':this.role=='处理厂司机'||this.role=='调度员司机'?'driver':this.role=='调度员'?'dispatcher':''
      }).then(res=>{
        // console.log(res.data,'有机质类型');
        if(res.data.code==200){
          this.allType = res.data.data;
        }else{
          this.allType = [];
        }
        console.log(this.allType,'allType');
      })
      organicType().then(res=>{
          console.log(res.data,'有机质类型');
          if(res.data.code==200){
            this.array = res.data.data;
          }
        })
      if(this.role == '处理厂司机'){
        // this.chartsWeek()
        // 接受工单
      workNum({}).then(res=>{
        console.log(res.data,'接受工单');
          if(res.data.code==200){
            this.worknums = res.data.data.orderTotal;
          this.driversewage = res.data.data.sewageTotal ||0;
          this.driverdung = res.data.data.cowDungTotal ||0;
          }
      });
      ordNum({}).then(res=>{
        console.log(res.data,'待接工单');
        if(res.data.code==200){
          this.dNum = res.data.data.dNum ||0;
          this.dayNum = res.data.data.todayTotalOrder ||0;
          this.receiveOrder = res.data.data.receiveOrder||0;
          console.log(this.receiveOrder,'receiveOrder');
          if(this.receiveOrder > 0){
            // this.flag = false;
          }
        }
      })

      }else if(this.role == '调度员'){
        // this.chartsWeek()
      }else if(this.role=='养殖场账号'){
        // 养殖场首页
        farmIndex().then(res=>{
          console.log(res.data,'养殖场首页');
          if(res.data.code==200){
            this.predicOrganicWeightVOList = res.data.data.predicOrganicWeightVOList;
            this.todayOrganicWeightVOList = res.data.data.todayOrganicWeightVOList;
            this.totalOrganicWeightVOList = res.data.data.totalOrganicWeightVOList;
            this.yj.text1 = this.predicOrganicWeightVOList[0].organicType;
            this.yj.weight1 = this.predicOrganicWeightVOList[0].organicWeight;
            this.yj.text2 = this.predicOrganicWeightVOList[1].organicType;
            this.yj.weight2 = this.predicOrganicWeightVOList[1].organicWeight;
          }
        })
        //缴费
        farmMonery({}).then(res=>{
          console.log(res.data,'费用');
          this.money.a = res.data.data.newMoney;
          this.money.b = res.data.data.oldMoney;
        })
        // 有机质类型
        
        // 养殖场账号
        this.chartsFarm();
      }else if(this.role=='实验员'||this.role=='任务发布实验员'||this.role=='任务分配实验员'){
        lastTime().then(res=>{
          console.log(res,'最新反馈时间');
          this.lastFeedbackTime = res.data.data.lastFeedbackTime;
        });
        experTotal().then(res=>{
          console.log(res.data,'总累计');
          this.expert[0].value =  res.data.data.completed;
          this.expert[1].value =  res.data.data.unCompleted;
        })
        experCurrent().then(res=>{
          console.log(res,'待开始');
          this.test.unstarted = res.data.data.unstarted;
          this.test.completed = res.data.data.completed;
        })
        experCategory().then(res=>{
          console.log(res,'实验类型列表');
        })
      }
      // 已加入
      days({}).then(res=>{
        console.log(res.data,'已加入');
        if(res.data.code==200){
          this.alDay = res.data.data||0
        }
      })
      // 收集
      collect({}).then(res=>{
        console.log(res.data,'已收集');
        if(res.data.code==200){
          this.sewage = res.data.data.sewage||0;
          this.dung = res.data.data.dung||0;
        }
      })
      // 预计待收集
      estimated({}).then(res=>{
        console.log(res.data,'预计待收集');
        if(res.data.code==200){
          this.predictSewage = res.data.data.sewage||0;
          this.predictDung = res.data.data.dung||0;
        }
      })
      // 收运车辆统计
      stats({}).then(res=>{
        console.log(res.data,'收运车辆统计');
        if(res.data.code==200){
          this.leisure = res.data.data.leisure||0;
          this.running = res.data.data.running||0;
        }
      })
      // 待接单
      task({}).then(res=>{
        console.log(res.data,'任务');
        if(res.data.code==200){
          this.aleardy = res.data.data.completed||0;
          this.pending = res.data.data.uncompleted||0;
        }
      })
      var pages = getCurrentPages(); 
        let currentPageRoute = pages[pages.length - 1].route;
        this.currentPage = currentPageRoute;
    },
    onLoad(){
      
    }
  };
  </script>
  <style lang="scss">
page {
	background-color: #f6f3e7;
}
  .container {
    // background: #f6f3e7;
    height: 100%;
    // max-height: 91vh;
    // overflow-y: scroll;
    // position: absolute;
    // left: 0;
    width: 100vw;
  }
  .carStop {
    text-align: center;
  }
  .carStop image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .card {
    border: 3px solid #1a512c;
    border-radius: 10px;
  }
  .center-bg {
    background: #1a512c;
    color: #fff;
    // width: 95%;
    // margin-left: 2.5%;
    border-radius: 10px;
  }
  .charts-box {
    width: 100%;
    // height: 230px;
    position: relative;
    // z-index: 1;
  }
  .foot-card {
    background: #fff;
    border-radius: 10px;
  }
  .look {
    background: #1a512c;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .looks {
    background: #D0463F;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tabBar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 9vh;
  }
  .roundDate{
    border-radius: 50%;
    border: 2px solid #1A512C;
    height: 75rpx;
    font-weight: 600;
    width:75rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A512C;
    background-color: #F6F3E7
  }
  .active{
    background: #1A512C;
    color: #fff;
  }
  .border-max {
  border: 1px solid #1a512c;
  border-radius: 5px;
  text-align: center;
  width: 100%;
}
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 90vw;
		// height: 120px;
		background-color: #f6f3e7;
    border-radius: 20px;
	}
  .km{
    color: #1a512c;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
  }
  .refresh{
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    color: #fff;
    background: #1A512C;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tip{
    font-size: 14px;
    color: #999999;
    text-align: center;
    font-weight: 500;
  }
  </style>
  